@page
@{ Layout = "_LayoutHome"; }

@section Styles{
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #ffffff;
        }

        html {
            padding: 0;
            margin: 0;
            background-color: #ffffff;
        }
    </style>

}

<el-card class="rounded-0 mb-5">
    <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex flex-row align-items-center">
            <img :src="DEFAULT_LOGO_URL" class="me-3 avatar-md" />
            <h2 class="h1 fw-bold m-0 p-0">首 页</h2>
        </div>
        <div>
            <el-tooltip placement="left-end">
                <div slot="content">
                    <div class="p-1">
                        <ul class="list-group lh-2g bg-white">
                            <li style="cursor:pointer;" class="list-group-item d-flex justify-content-between align-items-center" v-if="taskPlanTotal>0" v-on:click="top.$vue.btnTopMenuClick('studyPlan')">
                                <span class="me-5"><i class="text-warning bi bi-star-half me-2"></i>待完成学习任务</span>
                                <span class="text-warning h4 p-0 m-0">{{ taskPlanTotal }}</span>
                            </li>
                            <li style="cursor:pointer;" class="list-group-item d-flex justify-content-between align-items-center" v-if="taskCourseTotal>0" v-on:click="top.$vue.btnTopMenuClick('studyCourse')">
                                <span class="me-5">
                                    <i class="text-warning bi bi-star-half me-2"></i>待完成课程
                                </span>
                                <span class="text-warning h4 p-0 m-0">{{ taskCourseTotal }}</span>
                            </li>
                            <li style="cursor:pointer;" class="list-group-item d-flex justify-content-between align-items-center" v-if="taskPaperTotal>0" v-on:click="top.$vue.btnTopMenuClick('examPaper')">
                                <span class="me-5">
                                    <i class="text-warning bi bi-star-half me-2"></i>待参加考试
                                </span>
                                <span class="text-warning h4 p-0 m-0">{{ taskPaperTotal }}</span>
                            </li>
                            <li style="cursor:pointer;" class="list-group-item d-flex justify-content-between align-items-center" v-if="taskQTotal>0" v-on:click="top.$vue.btnTopMenuClick('examQuestionnaire')">
                                <span class="me-5">
                                    <i class="text-warning bi bi-star-half me-2"></i>待填写问卷
                                </span>
                                <span class="text-warning h4 p-0 m-0">{{ taskQTotal }}</span>
                            </li>
                            <li style="cursor:pointer;" class="list-group-item d-flex justify-content-between align-items-center" v-if="taskAssTotal>0" v-on:click="top.$vue.btnTopMenuClick('examAssessment')">
                                <span class="me-5">
                                    <i class="text-warning bi bi-star-half me-2"></i>待填写测评
                                </span>
                                <span class="text-warning h4 p-0 m-0">{{ taskAssTotal }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <el-badge :value="taskTotal" class="item me-5" type="warning">
                    <el-button> <i class="text-warning bi bi-star-half me-2"></i>待 办</el-button>
                </el-badge>
            </el-tooltip>
            <el-dropdown :show-timeout="0" placement="left">
                <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle avatar-lg shadow-lg" />
                <el-dropdown-menu slot="dropdown">
                    <div class="d-flex justify-content-between align-items-center px-3">
                        <button class="btn btn-sm btn-outline-white border-0" v-on:click="btnUserMenuClick('profile')"><i class="el-icon-edit me-2"></i>编辑信息</button>
                        <button class="btn btn-sm btn-outline-white border-0" v-on:click="btnUserMenuClick('password')"><i class="el-icon-key me-2"></i>修改密码</button>
                        <button class="btn btn-sm btn-outline-warning border-0" v-on:click="btnUserMenuClick('logout')"><i class="el-icon-switch-button me-2"></i>安全退出</button>
                    </div>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</el-card>
<div class="container">
    <div class="bg-cover rounded-5 position-relative shadow-lg bg-white mb-3 p-3" :style="{'background-image':'url('+(user.avatarbgUrl || DEFAULT_AVATAR_BG_URL)+')'}">
        <div class="align-items-center" :style="{height:(($(window).height()/4))+'px'}">
        </div>
        <div class="d-flex align-items-center justify-content-between p-3 rounded-none">
            <div class="d-flex align-items-end justify-content-between bg-black bg-opacity-50 p-1">
                <div class="h2 px-3 py-1 text-white" style="background-color: rgba(0, 0, 0, 0.1);">欢迎回来：）{{user.displayName}}</div>
            </div>
        </div>
        <div class="position-absolute top-0 end-0 p-5">
            <h2 class="rounded-3 text-white px-3 py-1" style="background-color: rgba(0, 0, 0, 0.1);"><i class="bi bi-calendar4-event me-3"></i>{{ dateStr }}</h2>
        </div>
    </div>
    <div class="m-8 px-5">
        <a href="javascript:;" class="card mx-8 position-relative mt-5 smooth-shadow-lg" v-if="studyPlan && studyPlan.id>0" v-on:click="studyPlan.isStudy ? btnViewPlanClick(studyPlan.id) : utils.error('计划不在有效期内')">
            <div class="position-absolute top-0 end-0 pe-5 pt-5 me-1 z-2">
                <img width="118" src="/sitefiles/assets/images/status/weikaishi.png" v-if="studyPlan.state==='Weikaishi'" />
                <img width="118" src="/sitefiles/assets/images/status/xuexizhong.png" v-if="studyPlan.state==='Xuexizhong'" />
                <img width="118" src="/sitefiles/assets/images/status/yidabiao.png" v-if="studyPlan.state==='Yidabiao'" />
                <img width="118" src="/sitefiles/assets/images/status/weidabiao.png" v-if="studyPlan.state==='Weidabiao'" />
                <img width="118" src="/sitefiles/assets/images/status/yiwancheng.png" v-if="studyPlan.state==='Yiwancheng'" />
            </div>
            <div class="z-1 p-3">
                <div class="row">
                    <div class="col-md-12">
                        <div class="border-bottom p-4 d-flex flex-column gap-3">
                            <div class="d-flex flex-column gap-4">
                                <h2 class="h2 fw-bold m-0 py-3 text-warning"><i class="bi bi-flag-fill me-2"></i>当前学习任务</h2>
                                <h3 class="mb-0 card-title">{{ studyPlan.plan.planName }}</h3>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <span>
                                            <span class="text-warning me-2">进度</span>
                                            <span class="text-dark fw-bold"><span class="fw-bold text-success">{{ studyPlan.overCourseTotal }}</span>/{{ studyPlan.plan.totalCount }}</span>
                                            (计划年度 {{ studyPlan.plan.planYear }} 培训周期 {{ studyPlan.plan.planBeginDateTimeStr }} -  {{ studyPlan.plan.planEndDateTimeStr }})
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            <span class="text-dark fw-bold"><span class="fw-bold text-success">{{ studyPlan.totalCredit }}</span>/{{ studyPlan.plan.planCredit }}</span>
                                            (学分)
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="progress w-100" role="progressbar">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success text-end" :style="{width:(utils.formatPercentFloat((studyPlan.overCourseTotal+studyPlan.overSelectCourseTotal),(studyPlan.plan.totalCount+studyPlan.plan.selectTotalCount)))+'%'}">{{ utils.formatPercentFloat((studyPlan.overCourseTotal+studyPlan.overSelectCourseTotal),(studyPlan.plan.totalCount+studyPlan.plan.selectTotalCount)) }}%</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center justify-content-between p-4">
                            <div>
                                <div class="mb-0"><span class="fs-1 fw-bold text-success">{{ studyPlan.overCourseTotal }}</span>共 {{ studyPlan.plan.totalCount }} 门必修</div>
                                <p class="mb-0">必修课</p>
                            </div>
                            <div>
                                <div class="icon-shape icon-xxl text-warning">
                                    <i class="bi bi-clipboard-check-fill fs-1"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 border-start">
                        <div class="d-flex align-items-center justify-content-between p-4">
                            <div>
                                <div class="mb-0">
                                    <span class="fs-1 fw-bold text-success">{{ studyPlan.overSelectCourseTotal }}</span>
                                    <span :class="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount ? 'text-success' : ' text-danger'" v-if="studyPlan.plan.selectCourseOverByCount">任意完成 {{ studyPlan.overSelectCourseTotal }} 门课程</span>
                                </div>
                                <p class="mb-0">选修课</p>
                            </div>
                            <div>
                                <div class="icon-shape icon-xxl">
                                    <i class="bi bi-clipboard-check fs-1"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <div class="card mx-8 position-relative mt-5 smooth-shadow-lg px-8" v-else>
            <div class="card-body d-flex align-items-center justify-content-between px-8">
                <h2 class="h2 fw-bold m-0 py-3 text-warning"><i class="bi bi-flag-fill me-2"></i>当前学习任务</h2>
                <div>
                    <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="99" description="暂无安排"></el-empty>
                </div>
            </div>
        </div>
    </div>
</div>
<el-card shadow="hover" class="rounded-0 my-5 border-start-0 border-end-0">
    <div class="row g-5 py-5">
        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
            <div class="card rounded-5 bg-white border-start-0 border-end-0 border-5 card-hover-with-icon" v-on:click="btnMoreMenuClick('studyPlan')">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xxl rounded-circle bg-success text-white card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
                            </svg>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="text-success fs-1">{{ studyPlanTotalOverCredit }}</span>
                                <span class="vr mx-2 text-gray-200"></span>
                                <span class="text-warning">{{ studyPlanTotalCredit }}</span>
                            </div>
                            <div>累计获得学分</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
            <div class="card rounded-5 bg-white border-start-0 border-end-0 border-5 card-hover-with-icon" v-on:click="btnMoreMenuClick('studyCourse')">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xxl rounded-circle bg-warning text-white card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
                                <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"></path>
                            </svg>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="text-success fs-1">{{ totalOverCourse }}</span>
                                <span class="vr mx-2 text-gray-200"></span>
                                <span class="text-warning">{{ totalCourse }}</span>
                            </div>
                            <div class="fw-normal">累计完成课程</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
            <div class="card rounded-5 bg-white border-start-0 border-end-0 border-5 card-hover-with-icon" v-on:click="btnMoreMenuClick('studyCourse')">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xxl rounded-circle bg-primary text-white card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
                                <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
                            </svg>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="text-success fs-1">{{ utils.formatDuration(totalDuration) }}</span>
                            </div>
                            <div class="fw-normal">累计学习时长</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</el-card>
<div class="container">
    <div class="row">
        <div class="col-7">
            <div class="ps-8" v-if="examPaper && examPaper.id>0">
                <div class="text-uppercase text-warning fw-semibold p-4 mt-3">
                    <h2 class="h2 fw-bold m-0 p-0 text-warning"><i class="bi bi-flag-fill me-2"></i>最新考试安排</h2>
                </div>
                <a class="card bg-primary border-primary" href="javascript:;" v-on:click="btnViewPaperClick(examPaper)">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="d-flex flex-column gap-8">
                            <h4 class="card-title text-white mb-0">{{ examPaper.title }}</h4>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="d-flex flex-column gap-1">
                                    <h1 class="display-4 text-white mb-0">{{ examPaper.examStartDateTimeStr }} 开考</h1>
                                    <p class="mb-0 text-white" v-if="examPaper.myExamTimes>0">（已参与）</p>
                                    <p class="mb-0 text-white" v-else>请及时参加</p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <i class="bi bi-flag-fill fs-1 text-warning"></i>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ms-8" v-else>
                <div class="text-uppercase text-warning fw-semibold p-4 mt-3">
                    <h2 class="h2 fw-bold m-0 p-0 text-warning"><i class="bi bi-flag-fill me-2"></i>最新考试安排</h2>
                </div>
                <div class="card shadow-lg borde-0 px-8">
                    <div class="card-body d-flex justify-content-start align-items-center">
                        <span class="me-8">暂无安排</span>
                        <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="66" description=" "></el-empty>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-5">
            <div class="me-5">
                <apexchart class="pt-3" type="radialBar" :options="passChartOptions" :series="passSeries" height="399"></apexchart>
            </div>
        </div>
    </div>
</div>
<el-card class="rounded-0 border-start-0 border-end-0" shadow="hover">
    <div class="row g-5 py-5">
        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
            <a class="card border-5 border-top-0 border-bottom-0 card-lift rounded-0" href="javascript:;" v-on:click="btnMoreMenuClick('examPaper')">
                <div class="d-flex justify-content-between align-items-center card-body">
                    <div class="ms-3">
                        <h4 class="mb-1">
                            <span>累计考试<span class="mx-2 text-success">{{ examTotal }}</span>场</span>
                        </h4>
                        <p class="mb-0">
                            <small class="fw-medium"><span>及格率<span class="ms-2 text-success">{{ examPercent }}<span class="fw-light ms-1">%</span></span></span></small>
                        </p>
                    </div>
                    <div>
                        <el-progress type="dashboard" :percentage="examPercent" color="#5cb87a" :width="88" :stroke-width="6"></el-progress>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
            <a class="card border-5 border-top-0 border-bottom-0 card-lift rounded-0" href="javascript:;" v-on:click="btnMoreMenuClick('examPaperMoni')">
                <div class="d-flex justify-content-between align-items-center card-body">
                    <div class="ms-3">
                        <h4 class="mb-1">
                            <span>累计模拟自测<span class="mx-2 text-success">{{ examMoniTotal }}</span>场</span>
                        </h4>
                        <p class="mb-0 fs-6">
                            <small class="fw-medium"><span>及格率<span class="ms-2 text-success">{{ examMoniPercent }}<span class="fw-light ms-1">%</span></span></span></small>
                        </p>
                    </div>
                    <div>
                        <el-progress type="dashboard" :percentage="examMoniPercent" color="#5cb87a" :width="88" :stroke-width="6"></el-progress>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-4">
            <a class="card border-5 border-top-0 border-bottom-0 card-lift rounded-0" href="javascript:;" v-on:click="btnMoreMenuClick('examPractice')">
                <div class="d-flex justify-content-between align-items-center card-body">
                    <div class="ms-3">
                        <h4 class="mb-1">
                            <span>累计刷题<span class="mx-2 text-success">{{ practiceAnswerTmTotal }}</span>道</span>
                        </h4>
                        <p class="mb-0 fs-6">
                            <small class="fw-medium"><span>正确率<span class="ms-2 text-success">{{ practiceAnswerPercent }}<span class="fw-light ms-1">%</span></span></span></small>
                        </p>
                    </div>
                    <div>
                        <el-progress type="dashboard" :percentage="practiceAnswerPercent" color="#5cb87a" :width="88" :stroke-width="6"></el-progress>
                    </div>
                </div>
            </a>
        </div>
    </div>
</el-card>
<div class="py-8 bg-light">
    <div class="container">
        <div class="text-center">
            <h2 class="fw-bold mb-5">
                <i class="bi bi-box-fill me-2 card-icon text-warning p-1"></i>新上课程
            </h2>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="mt-5">
                    <div class="row" v-if="courseList && courseList.length>0">
                        <div class="col-xl-3 col-lg-3 col-md-3 col-3" v-for="course in courseList">
                            <div class="card card-lift card-hover border bg-white p-2" v-on:click="btnViewCourseClick(course)" style="cursor:pointer;">
                                <div class="position-relative">
                                    <img :src="course.coverImg" class="img-fluid card-img">
                                    <span class="px-2 rounded-3 bg-dark text-white position-absolute bottom-0 end-0 m-2 fs-6">{{ utils.formatDuration(course.duration) }}</span>
                                    <el-tag size="mini" type="success" effect="dark" class="position-absolute top-0 end-0 m-2" v-if="course.state==='Yiwancheng'">{{ course.stateStr }}</el-tag>
                                    <el-tag size="mini" type="warning" effect="dark" class="position-absolute top-0 end-0 m-2" v-else>{{ course.stateStr }}</el-tag>
                                    <span class="position-absolute bottom-0 start-0 m-2">
                                        <el-tag size="mini" type="primary" effect="dark" class="me-1">{{ course.courseType}}</el-tag>
                                        <el-tag size="mini" type="primary" effect="plain" v-if="course.offLine">面授课</el-tag>
                                    </span>
                                </div>
                                <div class="card-body">
                                    <h4 class="mb-3">
                                        <a href="javascript:;" class="text-inherit">{{ course.name }}</a>
                                    </h4>
                                    <div class="mb-3 lh-1">
                                        <span>
                                            <i class="bi bi-star-fill text-warning me-2"></i>
                                            <span class="text-inherit fw-semibold">{{ course.evaluationAvg }}</span>
                                        </span>
                                        <span class="mx-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                 fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                            </svg>
                                        </span>
                                        <span>
                                            <i class="bi bi-person-video3 me-2"></i>
                                            <span class="text-inherit fw-semibold">{{ course.totaEvaluationlUser }}</span>
                                        </span>
                                    </div>
                                    <div class="lh-1">
                                        <i class="bi bi-credit-card-2-front-fill me-2"></i><span class="text-inherit fw-semibold">{{ course.studyHour }}</span> 课时
                                        <span class="mx-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                 fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                            </svg>
                                        </span>
                                        <span class="text-inherit fw-semibold text-success" v-if="course.state==='Yiwancheng'">{{ course.credit }}学分</span>
                                        <span class="text-inherit fw-semibold" v-else>{{ course.credit }}学分</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-8 mb-5 text-center">
                            <button class="btn btn-outline-primary border-0" v-on:click="btnMoreMenuClick('studyCourse')">更多<i class="bi bi-three-dots-vertical ms-2"></i></button>
                        </div>
                    </div>
                    <div v-else>
                        <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂无课程上架"></el-empty>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container py-8">
    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="fw-bold mt-3">
                        刷题练习
                    </h2>
                    <p class="mb-0 fs-4">共 {{ practiceAllTmTotal }} 道题可以练习</p>
                </div>
            </div>
        </div>
        <div class="col-12 mt-5">
            <div class="row g-5">
                <div class="col-4">
                    <div class="card rounded-3">
                        <div class="card-body">
                            <div class="row g-8 align-items-center">
                                <div class="col-4 text-center">
                                    <el-progress type="dashboard" :percentage="practiceAllPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                </div>
                                <div class="col-8">
                                    <div class="p-2 bg-light w-100 rounded-3">
                                        <el-button type="success" plain class="w-100 p-3 rounded-3" v-on:click="btnCreatePracticeClick('All')">
                                            <div>
                                                <i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始
                                            </div>
                                            <div class="fs-6 fw-light mt-2">共 {{ practiceAllTmTotal }} 道题</div>
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card rounded-3">
                        <div class="card-body">
                            <div class="row g-8 align-items-center">
                                <div class="col-4 text-center">
                                    <el-progress type="dashboard" :percentage="practiceCollectPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                </div>
                                <div class="col-8">
                                    <div class="p-2 bg-light w-100 rounded-3">
                                        <el-button type="primary" plain class="p-3 w-100 rounded-3" v-on:click="btnCreatePracticeClick('Collect')">
                                            <div>
                                                <i class="bi bi-person-hearts me-2"></i>收藏练习
                                            </div>
                                            <div class="fs-6 fw-light mt-2">共 {{ practiceCollectTmTotal }} 道题</div>
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card rounded-3">
                        <div class="card-body">
                            <div class="row g-8 align-items-center">
                                <div class="col-4 text-center">
                                    <el-progress type="dashboard" :percentage="practiceWrongPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                </div>
                                <div class="col-8">
                                    <div class="p-2 bg-light w-100 rounded-3">
                                        <el-button type="warning" plain class="p-3 w-100 rounded-3" v-on:click="btnCreatePracticeClick('Wrong')">
                                            <div>
                                                <i class="bi bi-backspace-reverse me-2"></i>错题练习
                                            </div>
                                            <div class="fs-6 fw-light mt-2">共 {{ practiceWrongTmTotal }} 道题</div>
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 mt-5 text-center">
            <button class="btn btn-outline-primary border-0" v-on:click="btnMoreMenuClick('examPractice')">更多练习<i class="bi bi-three-dots-vertical ms-2"></i></button>
        </div>
    </div>
</div>
<el-card class="rounded-0 py-3 text-center">
    <small>© {{ DOCUMENTTITLE }} <span class="text-warning">v{{ version }}</span></small>
</el-card>
@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/home/dashboard.js" type="text/javascript"></script>
}